<template>
	<view class="content">
		<image style="height: 400rpx;width: 100%;"
			src="https://images.pexels.com/photos/302457/pexels-photo-302457.jpeg?auto=compress&cs=tinysrgb&w=600"
			mode="aspectFill"></image>
		<view class="storename">
			<view class="box">
				<image
					src="https://images.pexels.com/photos/2313686/pexels-photo-2313686.jpeg?auto=compress&cs=tinysrgb&w=600"
					mode="aspectFill" style="border-radius: 20rpx;"></image>
				<view class="desc">
					<view class="name">
						某某餐厅(某某街店铺)
					</view>
					<view class="info">
						<uni-icons type="location" size="16" color="#bebebe"></uni-icons>
						某某城市某某区某某街道xx号
					</view>
					<view class="welcome">
						欢迎光临某某餐厅！
					</view>
				</view>
			</view>

			<view class="ms">
				这是关于餐厅的描述文字这是关于餐厅
				这是关于餐厅的描述文字这是关于餐厅
				这是关于餐厅的描述文字这是关于餐厅
			</view>

			<scroll-view :scroll-x="true" class="scrollview-box">
				<block v-for="(item,index) in scrollList" :key="index">
					<view class="item">
						<image :src="item.img" mode="aspectFill"></image>
						<view class="tit">
							<view>{{item.name}}</view>
							<view style="color: darkred;">￥{{item.price}}</view>
						</view>
					</view>
				</block>
			</scroll-view>
		</view>

		<view class="chooseP">
			<view class="weizhi">
				4号餐桌
			</view>

			<view class="chooseNum">
				<view class="tips">
					<view class="tit">
						您好，请选择用餐人数
					</view>
					<view class="p">
						这是一段描述文字这是一段描述文字
					</view>
				</view>

				<view class="nums">
					<view class="n-item" :class="idx == index?'act':''" v-for="(item,index) in nums" :key="index"
						@click="clicks(item,index)">{{item}}</view>
				</view>

				<view class="n-ipt">
					<input type="number" placeholder="自定义用餐人数" :value="val">
				</view>

				<button type="primary" @click="submitBtn()">确认点餐</button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				nums: [1, 2, 3, 4, 5, 6, 7, 8],
				val: 1,
				idx: 0,

				scrollList: [{
						img: 'https://images.pexels.com/photos/248413/pexels-photo-248413.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1',
						name: '麻婆豆腐',
						price: '12.00'
					},
					{
						img: 'https://images.pexels.com/photos/2313686/pexels-photo-2313686.jpeg?auto=compress&cs=tinysrgb&w=600',
						name: '辣椒炒肉',
						price: '19.00'
					},
					{
						img: 'https://images.pexels.com/photos/302457/pexels-photo-302457.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1',
						name: '水煮肉片',
						price: '9.00'
					},
					{
						img: 'https://images.pexels.com/photos/248413/pexels-photo-248413.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1',
						name: '更多',
						price: '7.00'
					},
				]
			}
		},
		onLoad() {

		},
		// 分享
		onShareAppMessage() {

		},
		onShareTimeline() {

		},
		methods: {
			clicks(item, index) {
				console.log(item);
				this.idx = index
				this.val = item
			},
			submitBtn() {
				uni.navigateTo({
					url: "/pages/list/list"
				})
			}
		}
	}
</script>

<style scoped>
	.content {
		background-color: #f5f5f5;
	}

	.storename {
		position: absolute;
		top: 13%;
		left: 50%;
		transform: translateX(-50%);
		width: 680rpx;
		background-color: #ffffff;
		box-shadow: 2rpx 2rpx 20rpx #e5e5e5;
		border-radius: 15rpx;
		padding: 25rpx;

	}

	.box {
		display: flex;
		justify-content: flex-start;
		align-items: center;
	}

	.ms {
		margin-top: 20rpx;
		font-size: 28rpx;
		line-height: 38rpx;
		color: #909090;
	}

	.storename image {
		width: 200rpx;
		height: 200rpx;
		margin-right: 20rpx;
	}

	.storename .name {
		font-size: 32rpx;
		color: #000;
		font-weight: 600;
		margin-bottom: 20rpx;
		font-family: Arial, Helvetica, sans-serif;
	}

	.storename .info {
		font-size: 26rpx;
		color: #909090;
		margin-bottom: 40rpx;
		display: flex;
		align-items: center;
	}


	.storename .welcome {
		width: 100%;
		font-size: 24rpx;
		color: #919191;
		background-color: rgb(0 170 127 / 9%);
		padding: 10rpx 20rpx;
		border-radius: 6rpx;
	}


	.chooseP {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 700rpx;
		background-color: #ffffff;
		padding-top: 80rpx;
		left: 50%;
		transform: translateX(-50%);
		border-top-left-radius: 20rpx;
		border-top-right-radius: 20rpx;
		overflow: hidden;
	}

	.chooseNum {
		padding: 15rpx;
	}

	.weizhi {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 80rpx;
		line-height: 80rpx;
		background-color: #00aa7f;
		color: #ffffff;
		text-align: center;
		font-weight: 600;
	}

	.tips {
		margin-bottom: 20rpx;
	}

	.tips .tit {
		font-size: 30rpx;
		font-weight: 600;
	}

	.tips .p {
		font-size: 24rpx;
		color: #909090;
		margin-top: 10rpx;
	}

	.nums {
		margin-top: 50rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		flex-wrap: wrap;
	}

	.nums .n-item {
		width: 24%;
		line-height: 70rpx;
		margin-bottom: 20rpx;
		border-radius: 10rpx;
		text-align: center;
		background-color: #eeeeee;
		font-weight: 600;
		font-size: 28rpx;
	}

	.n-ipt {
		height: 90rpx;
		margin-bottom: 20rpx;
	}

	.n-ipt input {
		text-align: center;
		height: 100%;
		background-color: #eeeeee;
		padding-left: 20rpx;
		font-size: 28rpx;
		border-radius: 10rpx;
		font-weight: 700;
	}

	button {
		background-color: #00aa7f;
		border-radius: 40rpx;
		margin: 30rpx 0rpx;
		font-size: 32rpx;
	}

	.act {
		background-color: #00aa7f !important;
		color: #ffffff !important;
	}


	.scrollview-box {
		white-space: nowrap;
		width: 100%;
		padding: 20rpx 0rpx;
	}

	.item {
		width: 300rpx;
		height: 230rpx;
		margin-right: 20rpx;
		display: inline-flex;
		flex-direction: column;
		align-items: center;
		background-color: #ffffff;
		border-radius: 10rpx;
		overflow: hidden;
	}

	.scrollview-box .item image {
		width: 300rpx;
		height: 200rpx;
	}

	.scrollview-box .item .tit {
		font-size: 28rpx;
		width: 100%;
		margin: 10rpx 0;
		line-height: 50rpx;
		display: flex;
		justify-content: space-around;
	}
</style>